<template>
	<view class="al-grid">
		<uni-grid :column="column" :highlight="true" :showBorder="false" @change="change">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<image class="al-grid-image" :src="item.icon" mode="widthFix"></image>
					<text class="text">{{item.name}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		name: "al-grid",
		props:{
			column:{
				type:Number,
				default:3
			},
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
			
				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.al-grid{
		margin: 20rpx 0;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		.text{
			color: #666;
			font-size: 28rpx;
		}
	}
	.al-grid-image{
		width: 60rpx;
	}
</style>
